page{
	height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
	background: #FFFFFF;
	.scroll {
		height: calc(100vh - 140rpx);
		overflow: hidden;
		.swiper-area {
			height: 400rpx;
			.swiper {
				height: 400rpx;
				.swiper-item {
					height: 400rpx;
					.swiper-img {
						height: 400rpx;
					}
				}
			}
		}
		.header {
			margin-top: 54rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.header-title {
				display: flex;
				flex-direction: column;
				.title {
					color: #333;
					font-size: 38rpx;
					font-weight: bold;
				}
				.price {
					margin-top: 24rpx;
					color: #FF3E3E;
					font-size: 36rpx;
				}
			}
			.header-collect {
				min-width: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 42rpx;
					height: 42rpx;
				}
				text {
					margin-top: 14rpx;
					color: #666;
					font-size: 26rpx;
				}
			}
		}
		
		.service-info {
			margin-top: 44rpx;
			padding: 0 30rpx;
			.service {
				background: #F9F9F9;
				padding: 25rpx 30rpx 30rpx 30rpx;
				display: flex;
				align-items: flex-start;
				.logo {
					border-radius: 50%;
					height: 100rpx;
					width: 100rpx;
					image {
						height: 100rpx;
						width: 100rpx;
					}
				}
				.describe {
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;
					.title {
						color: #333;
						font-size: 32rpx;
						font-weight: bold;
					}
					.goods {
						margin-top: 24rpx;
						width: 500rpx;
						color: #999;
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.service-detail {
			margin-top: 50rpx;
			padding: 0 30rpx;
			.title {
				padding-bottom: 30rpx;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.service-content {
				padding: 40rpx 0;
				.content {
					margin-bottom: 40rpx;
					display: flex;
					align-items: flex-start;
					position: relative;
					.icon {
						top: 6rpx;
						position: absolute;
						height: 22rpx;
						width: 4rpx;
						background: #0177FD;
					}
					.content-item {
						margin-left: 16rpx;
						display: flex;
						flex-direction: column;
						.content-title {
							color: #999;
							font-size: 24rpx;
						}
						.detail {
							margin-top: 15rpx;
							color: #333;
							font-size: 24rpx;
							line-height: 36rpx;
						}
					}
				}
			}
		}
	}
	.bottom-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		color: #fff;
		padding: 0 30rpx;
		display: flex;
		justify-content: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: 68rpx;
		.btn-ask {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 345rpx;
			height: 75rpx;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
			background: linear-gradient(90deg, #FE8F43 0%, #FEC66F 100%);
		}
		.btn-buy {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 345rpx;
			height: 75rpx;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background: linear-gradient(90deg, #FD3633 0%, #FF6634 100%);
		}
	}
}

.fixed-btn {
		.bottom-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			padding: 0 30rpx;
			height: 180rpx;
			width: 690rpx;
			background-color: rgba(1,1,1,.8);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn-text {
				font-size: 34rpx;
				color: #fff;
				display: flex;
				flex-direction: column;
			} 
			.btn {
				width: 208rpx;
				height: 80rpx;
				color: #fff;
				background: linear-gradient(90deg, #1C87F3 0%, #1CCFF3 100%);
				font-size: 30rpx;
				border-radius: 55rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}